<template>
  <div class="login_container">
    <div class="login_title">NUI-ADMIN</div>
    <input class="login_input" type="text" placeholder="请输入用户名" v-model="username">
    <input class="login_input" type="password" placeholder="请输入密码" v-model="password">
    <button class="login_button" @click="gohome">立即登录</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    gohome() {
      if(this.password == '' || this.username == '') {
        this.$message.error('用户名或密码不能为空！');
        return
      }
      axios.get('https://www.liulongbin.top:8888/api/private/v1/login', {
        params: {
          username: this.username,
          password: this.password
        }
      }).then(res=> {
        this.$message({
          message: '登陆成功！',
          type: 'success'
        });
        // console.log(res.data.data)
        var user = res.data.data
        var millisecond = new Date().getTime();
        var expiresTime = new Date(millisecond + 60 * 1000 * 60);
        this.$cookies.set('token', user.token, {
          expires: expiresTime
        })
        localStorage.setItem('user', JSON.stringify(user))
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped>
.login_container {
  width: 500px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid #eee;
}
.login_title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #666;
  margin: 20px;
}
.login_input {
  width: 400px;
  height: 30px;
  border: 1px solid #999;
  color: #666;
  margin: 5px 50px;
  outline: none;
  text-indent: 10px;
}
.login_button {
  width: 400px;
  height: 35px;
  border: none;
  margin: 5px 50px;
  background-color: #347E7F;
  color: #fff;
  outline: none;
}
</style>